<template>
  <div class="home-left">
    <el-collapse v-model="actives" accordion>
      <el-collapse-item v-for="item in newList" :key="item.type" :name="1">
        <template slot="title">
          <span class="collapse-title"> {{ item.name }} </span>
          <i v-if="item.icon" class="header-icon el-icon-info"></i>
        </template>
        <draggable tag="ul" class="collapse-ul" chosen-class="chosenClass" v-bind="{
          group: { name: 'form-draggable', pull: 'clone', put: false },
          sort: false,
          animation: 180,
          ghostClass: 'moving'
        }" :force-fallback="true" :value="item.list" @start="onStart($event, item)" @end="onEnd" item-key="id"
          @remove="onRemove" @move="onMove">
          <li v-for="element in item.list" :key="element.key" class="collapse-li" @click="onChooseComponent(element)">
            <!-- {{ element }} -->
            {{ element.label }}
          </li>
        </draggable>
      </el-collapse-item>
    </el-collapse>

    <!-- <draggable tag="div" chosen-class="chosenClass" v-bind="{
      group: { name: 'form-draggable', pull: 'clone', put: false },
      sort: false,
      animation: 180,
      ghostClass: 'moving'
    }" :force-fallback="true" :value="list"  @start="onStart" @end="onEnd" item-key="id" @remove="onRemove" @move="onMove">
      <div  v-for="element in list" :key="element.id" class="list-group-item drag-move"  @click="onChooseComponent(element)">
        {{ element.name }}
      </div>
    </draggable> -->
  </div>
</template>

<script>
import list from '@/assembly/index.js'
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      actives: [1],
      list: list,
      date: Date.now()
    }
  },
  computed: {
    newList() {
      const nlist = list.map(item => ({
        ...item,
        list: item.list.map(it => ({
          ...it,
          key: `${item.type}_${it.type}_${this.date}`,
          id: Date.now()
        }))
      }))
      console.log(nlist);
      return nlist
    },
  },
  created() { },
  methods: {
    onStart(e, item) {
      // e.item._underlying_vm_.id = 123456
      console.log(57, e.item._underlying_vm_);
      console.log("开始拖拽", e, item);
    },
    onEnd(e) {
      console.log("结束拖拽", e);
      this.date = Date.now()
    },
    onMove(e) {
      console.log(41, e);
    },
    onChooseComponent(element) {
      console.log(40, element);
    },
    onRemove(e) {
      console.log(43, e);
    }
  },
}
</script>

<style scoped lang="scss">
.collapse-title {
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
}

.collapse-ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10px;

  .collapse-li {
    display: inline-block;
    width: 48%;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border: 1px solid #555;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;

    &:hover {
      color: #4ba0fc;
      border: 1px solid #4ba0fc;
      background-color: #edf5ff;
    }
  }
}

.chosenClass {
  // background-color: aquamarine;
}
</style>